<div
	class="flex items-center rounded shadow-md overflow-hidden max-w-xl relative"
	[ngClass]="['bg' + contrast, 'text' + defaultInv]"
>
	<div
		class="self-stretch flex items-center px-3 flex-shrink-0"
		[ngClass]="['bg' + neutral, 'text' + primary]"
	>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-8 w-8"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
			/>
		</svg>
	</div>
	<div class="p-4 flex-1">
		<h3 class="text-xl font-bold">Error</h3>
		<p class="text-sm" [ngClass]="['text' + plainInv]">
			The password is incorrect. Do you need to
			<a href="#" rel="referrer noopener" class="underline">recover your password?</a>
		</p>
	</div>
	<button class="absolute top-2 right-2">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-4 w-4 p-2 rounded cursor-pointer"
			viewBox="0 0 20 20"
			fill="currentColor"
		>
			<path
				fill-rule="evenodd"
				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
				clip-rule="evenodd"
			/>
		</svg>
	</button>
</div>
